<template>
    <div class="app-container">
    <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="trainTitle"
            label="培训标题"
            width="250">
        </el-table-column>
        <el-table-column
            prop="trainDescription"
            label="培训描述"
            width="500">
        </el-table-column>
        <el-table-column
            prop="applyCuttime"
            label="报名截止"
            width="250">
        </el-table-column>
         <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">查看</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 30px; margin-bottom: 20px; text-align: center"
        >
        </el-pagination>
    </div>
</template>

<script>
import { findAllItem } from  '@/api/user';

export default {
    data() {
        return {
            tableData: [],
            formInLine:{
                id:0,
                page:1,
                limit:5
            },
            total: 0,
        number: 0,
        currentPage: 1,
        }
    },
    created() {
        this.formInLine.id = this.$route.query.userId;
        this.getAllItemById(this.formInLine);
    },
    methods: {
        getAllItemById(data){
            findAllItem(data).then( res => {
                console.log(res);
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.currentPage = res.data.currentPage;
            }).catch(
                err =>{
                    console.log(err);
                }
            )

        },
        handleClick(index, row) {
            
            this.$router.push({
                name: "trainDetails",
                query: {
                    userId: this.formInLine.id,
                    itemId: row.itemId,
                },
        });
        },
        handleSizeChange(val) {
      this.formInLine.limit = val;
      findAllItem(this.formInLine).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.currentPage = res.data.pageNum;
      });
    },
    handleCurrentChange(val) {
      this.formInLine.page = val;
      findAllItem(this.formInLine).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.currentPage = res.data.pageNum;
      });
      console.log(`当前页: ${val}`);
    },
    },
}
</script>

<style>

</style>